window.onload = function () {
	//reckon											
	function reckon() { 
		var growths = document.getElementsByName('e-growth'),
			chart = document.getElementsByTagName('canvas')[0],
			growthArr = [];

		//restore data
		if (window.localStorage && localStorage.growths) {
			for (var i = 0; i < growths.length; i ++) {
				growthArr[i] = localStorage.growths.split(',')[i];
				growths[i].value = localStorage.growths.split(',')[i];
			}
			draw();
		}

		//change data
		for (var i = 0; i < growths.length; i ++) {
			growths[i].oninput = function () {
				growthArr[this.getAttribute('data-index')] = this.value;
				save();
				draw();
			};
		}

		//save data
		function save() {
			if (window.localStorage) {
				localStorage.growths = growthArr;
			}
		};

		//calculate distance-X
		function chartX(num) {
			return (1 / (growthArr.length + 1)) * num * chart.width;
		};

		//calculate distance-Y
		function chartY(num) {
			return chart.height - (num / 100) * chart.height;
		};
			
		//draw chart
		function draw() {
			chart.width = chart.width;
			if (!chart.getContext) {
				return;
			}
			var c = chart.getContext('2d');
			c.lineWidth = 1.5;
			c.strokeStyle = 'red';
			c.fillStyle = 'black';
			c.font = '12px sans-serif';
			c.moveTo(0 , chart.height);
			for (var i = 0; i < growthArr.length; i ++) {
				c.lineTo(chartX(i + 1) , chartY(growthArr[i]));
				c.fillText(i + 1 , chartX(i + 1) - 3 , chartY(growthArr[i]) - 8);
			}
			c.stroke();			
		};
	};
	reckon();
};